<template>
  <ul class="slider">
    <li>
      <router-link class="cTrans" active-class="on" :to="{ name: 'smsxr' }"
        >声明式渲染</router-link
      >
    </li>
    <li>
      <router-link class="cTrans" active-class="on" :to="{ name: 'tjxr' }"
        >条件与循环</router-link
      >
    </li>
    <li>
      <router-link class="cTrans" active-class="on" :to="{ name: 'cluser' }">
        处理用户输入</router-link
      >
    </li>
  </ul>
</template>

<style lang="scss" scoped>
@import "../assets/css/vars.scss";
.slider {
  width: px2vw(300);
  li {
    height: px2vw(50);

    a {
      border-bottom: 1px solid $color1;
      height: 100%;
      display: flex;
      align-items: center;
      width: 100%;
      &.on {
        border-color: $on;
      }
    }
  }
}
</style>
